import React, { useState } from 'react'

// !问题：每次点击按钮都会开启一个新的定时器来控制 count，导致数据乱了
// !解决：每次点击清除上一次的定时器，保证永远只有一个开启不就行了吗
// !问题：下面写法为什么就不行呀？
export default function Test() {
  const [count, setCount] = useState(10)
  // 问题：你没有保证用的是同一个 timer，那就清除的不是上一次那个 timer
  let timer = null
  const handleClick = () => {
    console.log(timer, 333)
    clearInterval(timer)
    timer = setInterval(() => {
      setCount((count) => count - 1)
    }, 1000)
  }
  return (
    <div>
      <h3>{count}</h3>
      <button onClick={handleClick}>倒计时</button>
    </div>
  )
}
